window.onload = function () {

  index = 1;

  var container = document.getElementsByClassName("container")[0];
  var banner = document.getElementsByClassName("banner")[0];
  var img = document.getElementsByClassName("banner_img")[0];
  var li = document.getElementsByClassName("banner-li");
  var arrows = document.getElementsByClassName("arrow");

  var buttonContainer = document.getElementsByClassName("button_container")[0];
  var buttons = document.getElementsByClassName("button_container_circle");
  var prev = document.getElementsByClassName("prev")[0];
  var next = document.getElementsByClassName("next")[0];

  var offset = img.offsetWidth;
  //设置contain宽高以及隐藏其他元素
  container.style.width = offset + "px";
  container.style.height = img.offsetHeight + "px";
  container.style.overflow = "hidden";
  //给banner设置宽高
  banner.style.width = offset * li.length + "px";
  banner.style.height = img.offsetHeight + "px";
  banner.style.left = -offset + "px";
  // 设置arrow的宽高
  for (var i = 0; i < arrows.length; i++) {
    arrows[i].style.top = parseInt(img.offsetHeight) / 2 - parseInt(arrows[i].offsetHeight)/2 + "px";
  }
  
  function animate() {

    banner.style.transition = "0.3s";
    banner.style.left = -parseInt(offset) * index + "px";

    // 针对无限循环
    if (index === 0) {

      // 最前面，先滑动到前一个位置，然后默默的切换到最后
      index = li.length - 2;
      reLocation();
    } else if (index === li.length - 1) {

      // 最后面，先滑动到后一个位置，然后默默的切换到最前面
      index = 1;
      reLocation();
    }

    controlButton();
  }

  //回归位置
  function reLocation() {

    untieArrow();
    setTimeout(() => {
      banner.style.transition = "0s";
      banner.style.left = -parseInt(offset) * index + "px";
      bindArrow();
    }, 300)

  }
  var timer;
  stopAnimation();//定时器

  startAnimation();//定时启动

  controlMouse();//监听器

  bindArrow();

  bindClickButton();//绑定button

  function bindArrow() {

    /* 向左 */
    prev.onclick = function () {

      index--;
      animate();
    }

    /* 向右 */
    next.onclick = function () {

      index++;
      animate();
    }
  }

  function untieArrow() {

    /* 向左 */
    prev.onclick = function () { }

    /* 向右 */
    next.onclick = function () { }
  }


  buttonContainer.style.top = img.offsetHeight - 40 + "px";
  buttonContainer.style.left = (offset - buttonContainer.offsetWidth) / 2 + 'px';
  //控制button位置
  function controlButton() {
    let key;//初始化key
    if (index == 0) {
      key = 5;
    } else if (index == li.length - 1) {
      key = 1;
    } else {
      key = index;
    }
    for (var i = 0; i < buttons.length; i++) {
      if (key == buttons[i].getAttribute('index')) {
        buttons[i].className = 'button_container_circle on'
      } else {
        buttons[i].className = 'button_container_circle'
      }
    }
  }
  /* button绑定 */
  function bindClickButton() {

    for (var i = 0; i < buttons.length; i++) {

      (function (ii) {

        buttons[ii].onclick = function () {

          index = buttons[ii].getAttribute('index');
          animate();
        }
      })(i)
    }
  }
  function startAnimation() {//定时轮播
    clearInterval(timer);
    timer = setInterval(function () {

      next.onclick();
    }, 2000)
  }

  /* 停止动画 */
  function stopAnimation() {

    if (timer) {
      clearInterval(timer);
    }
  }
  function controlMouse() {//控制鼠标避免和自动轮播冲突
    container.onmouseover = function () {
      startAnimation();//鼠标停止移动
    }
  }

  container.onmouseout = function () {
    startAnimation();//开始动画
  }
}


